---
title: Vite
description: How to use HeroUI with Vite
---

# Vite

Requirements:

- [Vite 2](https://vitejs.dev/) or later
- [React 18](https://reactjs.org/) or later
- [Tailwind CSS v4](https://tailwindcss.com/docs/installation/using-vite)
- [Framer Motion 11.9](https://www.framer.com/motion/) or later

------

<CarbonAd/>

To use HeroUI in your Vite project, you need to follow the following steps:

### HeroUI CLI (recommended)

If you are starting a new project, you can use the [HeroUI CLI](/docs/guide/cli) to create a new project with HeroUI pre-configured:

<PackageManagers
  commands={{
    npm: 'npx heroui-cli@latest init -t vite',
    yarn: 'yarn dlx heroui-cli@latest init -t vite',
    pnpm: 'pnpm dlx heroui-cli@latest init -t vite',
    bun: "bunx heroui-cli@latest init -t vite"
  }}
/>

### Using HeroUI + Vite template

If you are starting a new project, you can run one of the following commands to create a Vite project pre-configured with HeroUI:

<PackageManagers
  commands={{
    npm: 'npx degit https://github.com/heroui-inc/vite-template my-vite-app',
    yarn: 'yarn dlx degit https://github.com/heroui-inc/vite-template my-vite-app',
    pnpm: 'pnpm dlx degit https://github.com/heroui-inc/vite-template my-vite-app',
    bun: 'bunx degit https://github.com/heroui-inc/vite-template my-vite-app',
  }}
/>

### Automatic Installation

You can add individual components using the CLI. For example, to add a button component:

```codeBlock bash
npx heroui-cli@latest add button
```

This command adds the Button component to your project and manages all related dependencies.

You can also add multiple components at once:

```codeBlock bash
npx heroui-cli@latest add button input
```

Or you can add the main library `@heroui/react` by running the following command:

```codeBlock bash
npx heroui-cli@latest add --all
```

If you leave out the component name, the CLI will prompt you to select the components you want to add.

```codeBlock bash
? Which components would you like to add? › - Space to select. Return to submit
Instructions:
    ↑/↓: Highlight option
    ←/→/[space]: Toggle selection
    [a,b,c]/delete: Filter choices
    enter/return: Complete answer

Filtered results for: Enter something to filter

◯  accordion
◯  autocomplete
◯  avatar
◯  badge
◯  breadcrumbs
◉  button
◯  card
◯  checkbox
◯  chip
◯  code
```

You still need to add the provider to your app manually (we are working on automating this step).

```jsx {3,7,9}
// app/providers.tsx

import {HeroUIProvider} from '@heroui/react'

export function Providers({children}: { children: React.ReactNode }) {
  return (
    <HeroUIProvider>
      {children}
    </HeroUIProvider>
  )
}
```

<Spacer y={4} />

```jsx {6,10,12,14}
// app/layout.tsx

// globals.css includes @tailwind directives
// adjust the path if necessary
import "@/styles/globals.css";
import {Providers} from "./providers";

export default function RootLayout({children}: { children: React.ReactNode }) {
  return (
    <html lang="en" className='dark'>
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}
```

### Manual Installation

<Steps>

### Add dependencies

In your Vite React project, run one of the following command to install HeroUI:

<PackageManagers
  commands={{
    npm: 'npm i @heroui/react framer-motion',
    yarn: 'yarn add @heroui/react framer-motion',
    pnpm: 'pnpm add @heroui/react framer-motion',
    bun: "bun add @heroui/react framer-motion"
  }}
/>

### Hoisted Dependencies Setup

<Blockquote color="primary">
**Note**: This step is only for those who use `pnpm` to install. If you install HeroUI using other package managers, you may skip this step.
</Blockquote>

If you are using pnpm, you need to add the following line to your `.npmrc` file to hoist our packages to the root `node_modules`.

```bash
public-hoist-pattern[]=*@heroui/*
```

After modifying the `.npmrc` file, you need to run `pnpm install` again to ensure that the dependencies are installed correctly.

### Tailwind CSS Setup

HeroUI is built on top of Tailwind CSS, so you need to install Tailwind CSS first. You can follow the official
[installation guide](https://tailwindcss.com/docs/installation/using-vite) to install Tailwind CSS.

<Blockquote color="primary">
**Note**: If you are using pnpm and monorepo architecture, please make sure you are pointing to the ROOT `node_modules`
</Blockquote>

Then you need to create `hero.ts` file

```ts
// hero.ts
import { heroui } from "@heroui/react";
export default heroui();
```

and add  the following code to your main css file:

```css
@import "tailwindcss";
@plugin './hero.ts';
/* Note: You may need to change the path to fit your project structure */
@source '../../node_modules/@heroui/theme/dist/**/*.{js,ts,jsx,tsx}';
@custom-variant dark (&:is(.dark *));
```

### Provider Setup

After installing HeroUI, you need to set up the `HeroUIProvider` at the `root` of your application.

Go to the src directory and inside `main.jsx` or `main.tsx`, wrap `HeroUIProvider` around App:

```jsx {4,10,12}
// main.tsx or main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import {HeroUIProvider} from '@heroui/react'
import App from './App'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <HeroUIProvider>
      <App />
    </HeroUIProvider>
  </React.StrictMode>,
)
```

</Steps>